<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>下载戏曲字幕应用</title>
    <link rel="stylesheet" href="css/download.css">
</head>

<body>
    <header>
        <a href="index.html">《 返回</a>
        <h3>下载戏曲字幕软件</h3>
    </header>
    <p class="info">本软件适用于Android版和鸿蒙3.0版</p>
    <div id="download-link-list"></div>
    <dialog id="qrcode-dialog">
        <span class="qr-close" id="qr-close">X</span>
        <p>戏曲字幕</p>
        <div class="qr-item" id="qrcode"></div>
        <p id="qr-tip" class="qr-tip"></p>
    </dialog>
    <p>需要在浏览器打开本页面。不要在抖音打开页面，因为抖音不允许下载Apk。</p>
    <fieldset>
        <legend>本页面地址：<small>（点击链接复制）</small></legend>
        <code id="myLocaltion">https://xlgp.github.io/xiquzimu-doc/download.html</code>
    </fieldset>
    <p class="info">戏曲字幕应用后缀为<code>.apk</code>，若下载后后缀为<code>.zip</code>，是浏览器默认行为，可以改浏览器设置，或者更换浏览器。</p>
    <p>若点击上按钮无法下载，则可以手动复制以下链接并用浏览器打开，前往Gitee或者Github下载戏曲字幕。</p>
    <fieldset>
        <legend>Gitee 下载页面<small>（点击链接复制）</small></legend>
        <code>https://gitee.com/xlgp/xiquzimu-apk/releases/</code>
    </fieldset>
    <fieldset>
        <legend>Github 下载页面<small>（点击链接复制）</small></legend>
        <code>https://github.com/xlgp/xiquzimu-apk/releases/</code>
    </fieldset>
</body>

<script type="text/javascript">

    function createLink(dlInfo, index) {
        let living = "";
        for (const item of dlInfo.living) {
            living += `<span class="dl-living-item">${item}</span>`;
        }

        let tips = "";
        if (Array.isArray(dlInfo.tips) && dlInfo.tips.length > 0) {
            let lis = "";
            for (const item of dlInfo.tips) {
                lis += `<li>${item}</li>`;
            }
            tips = `<ul>${lis}</ul>`;
        }

        let h = `
    <div class="dl-link-box">
        <a class="dl-link-item" href="${dlInfo.link}">
            <span>${dlInfo.version}</span>
            <span class="dl-button">下载</span>
        </a>
        <div class="dl-link-tip">
            <div class="dl-living-wrapper">
                <span>适用直播平台：</span>
                <span>
                    ${living}
                </span>
            </div>
            ${tips}
            <button class="dl-button qr-button" data-index="${index}">查看二维码</botton>
        </div>
    </div>
    `
        return h;
    }

    function addDownloadLinkElem(parentElement, list) {
        let html = "";
        for (let i = 0; i < list.length; i++) {
            const item = list[i];
            html += createLink(item, i);
        }
        parentElement.innerHTML = html;
    }

    let dlInfos = [
        {
            version: "v25.0.0(3389)",
            link: "https://gitee.com/xlgp/xiquzimu-apk/releases/download/v25.0.0/xiquzimu_v25.0.0(3389)_release.apk",
            living: ["抖音", "抖音极速版", "抖音火山版", "微信视频号"],
            tips: ["若使用中经常出现卡词异常，可重新安装低版本。"]
        },
        {
            version: "v23.0.0(2897)",
            link: "https://gitee.com/xlgp/xiquzimu-apk/releases/download/v23.0.0(2897)/xiquzimu_v23.0.0(2897)_release.apk",
            living: ["抖音", "抖音极速版", "抖音火山版", "微信视频号"],
        },
        {
            version: "v18.8.8(2000)_抖音版",
            link: "https://gitee.com/xlgp/xiquzimu-apk/releases/download/v18.8.8/xiquzimu_v18.8.8(2000)_douyin_release.apk",
            living: ["抖音", "抖音极速版", "抖音火山版"],
            tips: ["此版本为较低版本的修复版。"]
        }
    ];

    const elem = document.getElementById("download-link-list");
    elem.addEventListener("click", e => {
        let elem = e.target;
        let dlInfo = dlInfos[elem.dataset["index"]];
        if (elem.className.includes("qr-button")) {
            openDialog({
                text: dlInfo.link,
                tip: dlInfo.version
            });
        }
    });
    addDownloadLinkElem(elem, dlInfos);

</script>

<script>

    let myHref = window.location.href;
    let myLocaltion = document.getElementById("myLocaltion");
    myLocaltion.innerText = myHref;

    const codeElems = document.getElementsByTagName("code");
    for (const elem of codeElems) {
        elem.dataset.clipboardText = elem.innerText;
    }

    const downloadLinkElems = document.getElementsByClassName("download-link-extra");
    for (const elem of downloadLinkElems) {
        const linkElem = elem.parentElement.getElementsByClassName("download-link")[0];
        elem.dataset.clipboardText = linkElem.href;
    }

</script>
<script src="https://cdn.bootcdn.net/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
<script type="text/javascript">

    const dialog = document.getElementById("qrcode-dialog");
    if (typeof dialog.showModal !== "function") {
        dialog.hidden = true;
    }

    dialog.addEventListener("click", e=>{
        const elem = e.target;
        if(elem instanceof  HTMLDialogElement || elem.id == "qr-close"){
            dialog.close();
        }
    });

    /**
     * qrOption = {
     *  text:string
     * tip:string
     * }
     **/
    const qrCodeElem = document.getElementById("qrcode");
    const qrTipElem = document.getElementById("qr-tip");

    function openDialog(qrOption) {
        qrCodeElem.innerText = "";

        let { text, tip } = qrOption;

        new QRCode(qrCodeElem, {
            text,
            width: 200,
            height: 200
        });
        qrTipElem.innerText = tip;
        dialog.showModal();
    }

</script>
<script src="https://cdn.bootcdn.net/ajax/libs/clipboard.js/2.0.11/clipboard.min.js"></script>
<script type="text/javascript">
    new ClipboardJS('code');
    new ClipboardJS(".download-link-extra");
</script>

</html>